<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link type="text/css" rel="stylesheet"
          href="../../bootstrap-4.4.1-dist/css/bootstrap.css">
    <script src="../../bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</head>
<style>
    body::before {
        content: "读万卷书，行万里路";
        position: absolute;
        top: 85%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: '庞门正道标题体3.0';
        font-size: 24px;
        color: #ffffff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    body {
        background-image: url('../../image/登录背景2.jpeg'); /* 替换为你的图片URL */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; /* 设置背景图片不重复 */
    }


    .container {
        max-width: 400px;
        margin: 50px auto;
        padding: 20px;
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .logo {
        text-align: center;
        margin-bottom: 20px;
    }

    .logo img {
        width: 100px;
        border-radius: 50%;
    }

    .form-control {
        border-color: #cccccc;
    }

    .btn:hover {
        background-color: #FFD700;
        border-color: #FFD700;
    }

    .btn-sunshine {
        background-color: #FFA500; /* 橙色 */
        border-color: #FFA500;
        color: #000000; /* 黑色 */
    }


</style>
</head>
<body>
<div class="container">
    <div class="logo">
        <img src="../../image/logo.png" alt="Logo"><br>
        <label for="email">SUN 图书馆</label>
    </div>
    <div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="text" class="form-control" id="email" placeholder="请输入账号">
        </div>
        <div class="form-group">
            <label for="pwd">密码</label>
            <input type="password" class="form-control" id="pwd" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="captcha"><a onclick="sendCaptcha()" style="color: blue"
                                    id="sendCaptchaText">发送验证码</a></label>
            <input type="text" class="form-control" id="captcha" placeholder="请输入验证码">
        </div>
        <button type="submit" class="btn btn-primary btn-block btn-sunshine" onclick="login()">登录</button>
        <a href="../../html/register/register.html" class="btn btn-primary btn-block btn-sunshine">前往注册</a></div>
</div>
</body>
</html>
<script src="../../js/jquery.js"></script>
<script>
    // 验证码发送
    function sendCaptcha() {
        let opr = "sendCaptcha"
        $.ajax({
            'url': '../../ReaderServlet.action',
            'type': 'post',
            'data': {opr},
            'dataType': 'json',
            'success': sendCaptchaSuccess
        })
    }

    function sendCaptchaSuccess(data) {
        if (data == "ok") {
            $('#sendCaptchaText').html("验证码已发送!(重新发送)")
        } else {
            alert("验证码发送失败!")
        }
    }

    // window.onload = function () {
    //     var currentUrl = window.location.href;
    //     if (currentUrl[currentUrl.length - 1] === '?') {
    //         history.back();
    //     }
    // };

    //登录
    function login() {
        let email = $('#email').val()
        let pwd = $('#pwd').val()
        let captcha = $('#captcha').val()
        if (loginVerify(email, pwd, captcha)) {
            let opr = "login"
            $.ajax({
                'url': '../../ReaderServlet.action',
                'type': 'post',
                'data': {opr, email, pwd, captcha},
                'dataType': 'json',
                'success': loginSuccess,
                'async':false
            })
            // return new Promise((resolve, reject) => {
            //     $.ajax({
            //         'url': '../../ReaderServlet.action',
            //         'type': 'post',
            //         'data': {opr: "login", email: email, pwd: pwd, captcha: captcha},
            //         'dataType': 'json',
            //         'success': function (response) {
            //             alert(response)
            //         },
            //         'error': function (error) {
            //             reject(error);
            //         }
            //     });
            // });
        }

    }

    function loginSuccess(data) {
        if (data == 'ok') {
            alert("登录成功!!!");
            $(location).attr('href', '../../html/home/home.html')
        } else if (data == 'captchaNo') {
            alert("验证码错误!!!");
        } else if (data == 'loginNo') {
            alert("邮箱或密码错误!!!");
        }
    }


    //登录校验
    function loginVerify(email, pwd, captcha) {
        // 邮箱校验规则
        let emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

        if (email == '') {
            alert("邮箱不可为空！");
            return false;
        } else if (!emailRegex.test(email)) {
            alert("邮箱格式不正确！");
            return false;
        }

        if (pwd == '') {
            alert("密码不可为空！");
            return false;
        }

        if (captcha == '') {
            alert("验证码不可为空！")
        }

        return true;
    }

</script>